<!doctype html>
<html ng-app="myApp">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- for example only -->
    <script src="../../node_modules/angular/angular.js"></script>
    <!-- end -->
    
    <link rel="stylesheet" type="text/css" href="../assets/mui/css/mui.css"/>
    <script src="../assets/mui/angular/mui-angular.js"></script>
    <script>
      var myApp = angular.module('myApp', ['mui']);

      myApp.controller('ExampleCtrl', function($scope) {
        $scope.valA = 'opt2';
        $scope.valB = 'opt4';
        $scope.valC = 'opt3';
        $scope.valD = 'opt2';
        $scope.valE = 'opt2';
        $scope.valF = 'opt1';
        $scope.valG = 'opt1';
        $scope.valH = '';
        $scope.valI = '0';
        $scope.valJ = {value: 'value'};

        var counter = 0
        $scope.optionsI = [counter];
        
        $scope.addOptionI = function() {
          $scope.optionsI.push(counter + 1);
          counter += 1;
        };
        
        $scope.delOptionI = function() {
          $scope.optionsI.splice(-1, 1);
        };
        
        $scope.revOptionsI = function() {
          console.log($scope.optionsI);
          $scope.optionsI.reverse();
          console.log($scope.optionsI);
        };
        
        $scope.onChangeJ = function() {
          console.log('onChangeJ: ' + $scope.valJ.value);
        };
        $scope.$watch('valJ.value', function(v1, v2) {
          console.log('watch: ' + v1);
        });
        
        $scope.selectedName = {value: 'Name2'};
        $scope.nameChange = function() {
          console.log('change: ' + $scope.selectedName.value);
        };
        $scope.$watch('selectedName.value', function(v1, v2) {
          if (v1 !== v2) console.log('watch: ' + v1);
        });
      });
    </script>
  </head>
  <body ng-controller="ExampleCtrl">
    <mui-container>
      <h1>Select</h1>
      <mui-panel>
        <form method="get" action="test">
          <strong>Should have value "Option 2"</strong>
          <mui-select
            name="exampleA"
            label="Label 1"
            ng-model="valA"
            ng-change="onChangeA()"
          >
            <mui-option label="Option 1" value="opt1"></mui-option>
            <mui-option label="Option 2" value="opt2"></mui-option>
            <mui-option label="Option 3" value="opt3"></mui-option>
            <mui-option label="Option 4" value="opt4"></mui-option>
            <mui-option label="Option 5" value="opt5"></mui-option>
            <mui-option label="Option 6" value="opt6"></mui-option>
            <mui-option label="Option 7" value="opt7"></mui-option>
            <mui-option label="Option 8" value="opt8"></mui-option>
          </mui-select>

          <strong>Should have value "Option 4" and use default UI</strong>
          <mui-select name="exampleB" ng-model="valB" use-default>
            <mui-option label="Option 1" value="opt1"></mui-option>
            <mui-option label="Option 2" value="opt2"></mui-option>
            <mui-option label="Option 3" value="opt3"></mui-option>
            <mui-option label="Option 4" value="opt4"></mui-option>
            <mui-option label="Option 5" value="opt5"></mui-option>
            <mui-option label="Option 6" value="opt6"></mui-option>
            <mui-option label="Option 7" value="opt7"></mui-option>
            <mui-option label="Option 8" value="opt8"></mui-option>
          </mui-select>

          <strong>Should have value "Option 3" and be disabled</strong>
          <mui-select name="exampleC" ng-model="valC" ng-disabled="true">
            <mui-option label="Option 1" value="opt1"></mui-option>
            <mui-option label="Option 2" value="opt2"></mui-option>
            <mui-option label="Option 3" value="opt3"></mui-option>
            <mui-option label="Option 4" value="opt4"></mui-option>
            <mui-option label="Option 5" value="opt5"></mui-option>
            <mui-option label="Option 6" value="opt6"></mui-option>
            <mui-option label="Option 7" value="opt7"></mui-option>
            <mui-option label="Option 8" value="opt8"></mui-option>
          </mui-select>

          <strong>Should have value "Option 2"</strong>
          <mui-select name="exampleD" ng-model="valD">
            <mui-option label="Option 1" value="opt1"></mui-option>
            <mui-option label="Option 2" value="opt2"></mui-option>
            <mui-option label="Option 3" value="opt3"></mui-option>
            <mui-option label="Option 4" value="opt4"></mui-option>
            <mui-option label="Option 5" value="opt5"></mui-option>
            <mui-option label="Option 6" value="opt6"></mui-option>
            <mui-option label="Option 7" value="opt7"></mui-option>
            <mui-option label="Option 8" value="opt8"></mui-option>
          </mui-select>

          <strong>Should jump to item as you type</strong>
          <mui-select name="exampleE" ng-model="valE">
            <mui-option label="A" value="opt1"></mui-option>
            <mui-option label="B" value="opt2"></mui-option>
            <mui-option label="Ba" value="opt3"></mui-option>
            <mui-option label="Bb" value="opt4"></mui-option>
            <mui-option label="C" value="opt5"></mui-option>
            <mui-option label="6" value="opt6"></mui-option>
          </mui-select>

          <strong>Should have a disabled option</strong>
          <mui-select name="exampleF" ng-model="valF">
            <mui-option label="A" value="opt1"></mui-option>
            <mui-option label="B" value="opt2" ng-disabled="true"></mui-option>
            <mui-option label="C" value="opt3"></mui-option>
          </mui-select>

          <strong>Should have a hidden option</strong>
          <mui-select name="exampleG" ng-model="valG">
            <mui-option label="A" value="opt1"></mui-option>
            <mui-option label="B" value="opt2" hidden></mui-option>
            <mui-option label="C" value="opt3"></mui-option>
          </mui-select>

          <strong>Placeholder</strong>
          <mui-select
            name="exampleH"
            placeholder="Placeholder"
            ng-model="valH"
          >
            <mui-option label="Option 1" value="option1"></mui-option>
            <mui-option label="Option 2" value="option2"></mui-option>
            <mui-option label="Option 3" value="option3"></mui-option>
          </mui-select>

          <strong>Variable number of options</strong>
          <button type="button" ng-click="addOptionI()">+</button>
          <button type="button" ng-click="delOptionI()">-</button>
          <button type="button" ng-click="revOptionsI()">⟳</button>
          <mui-select name="exampleI" ng-model="valI">
            <mui-option
              ng-repeat="v in optionsI track by $index"
              label="{{v}}"
              value="{{v}}"
            >
            </mui-option>
          </mui-select>

          <mui-select ng-model="valJ.value" ng-change="onChangeJ()">
            <mui-option label="Option 1" value="value"></mui-option>
            <mui-option label="Option 2" value="value"></mui-option>
            <mui-option label="Option 3" value="value"></mui-option>
            <mui-option label="Option X" value="valueX"></mui-option>
          </mui-select>
          
          <select id="myselect">
            <option value="value">Option 1</option>
            <option value="value" selected>Option 2</option>
            <option value="value">Option 3</option>
          </select>
          <div><a onclick="change()">click me</a></div>
          <script>
           setTimeout(function() {
             var el = document.getElementById('myselect');
             el.addEventListener('change', function(ev) {
               console.log(el.selectedIndex);
             });

             window.change = function() {
               el.selectedIndex = 2;
               console.log('change');
             };
           });
          </script>

          <select
              ng-model="selectedName.value"
              ng-change="nameChange()"
          >
            <option value="Name1">Name1</option>
            <option value="Name2">Name2</option>
            <option value="Name3">Name3</option>
          </select>
          
          <mui-button variant="raised">submit</mui-button>
        </form>
      </mui-panel>
    </mui-container>
  </body>
</html>
